<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <title>BMI监测</title>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="../../../common/css/common.css" />
    <link rel="stylesheet" href="../../../common/css/vant-index.css" />
    <link rel="stylesheet" href="../../css/monitor.css">
    <link rel="stylesheet" href="../../css/bloodprofile1.css">
    <!-- 引入 viewer 图片预览样式文件 -->
    <link href="../../../common/css/viewer.css" rel="stylesheet" />

    <style type="text/css">
        .van-button--info {
            background: #F5F5F5;
            color: #595959;
            border-color: #F5F5F5;
        }

        .van-button--warning {
            color: #FFFFFF;
        }

        .van-icon-arrow:before {
            content: '\e660';
            font-size: 14px;
            transform: rotate(0deg);
        }

        .van-pagination__item:not(:last-child)::after {
            border-right-width: 0;
        }

        .van-hairline--surround::after {
            border-width: 0px;
        }

        .van-cell__value--alone {
            font-size: 14px;
        }

        .van-button--mini {
            font-size: 12px;
        }
    </style>
    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="../../../common/js/vue.min.js"></script>
	<script src="../../../common/js/axios.min.js"></script>
    <script src="../../../common/js/vue.global.prod.js"></script>

</head>

<body>
    <div id="app" v-cloak>

        <div class="bs_echart">
            <div class="bp_title flex">
                <div class="bp_title_main">
                    <p>BMI曲线</p>
                </div>
                <!-- <div class="bp_title_tips">
                    <ul>
                        <li><span style="background:#BAE7FF;"></span>
                            <p>40-60</p>
                        </li>
                        <li><span style="background: #D9F7BE;"></span>
                            <p>60-140</p>
                        </li>
                        <li><span style="background: #FFCCC7;"></span>
                            <p>>140</p>
                        </li>
                    </ul>
                </div> -->
            </div>

            <div class="shadow">
                <div class="echart_tabs bp_tabs flex">
                    <van-button v-for='item in period' round type="info" size="mini" :key="'period_'+item.key"
                        :class="['filter-item', (selected.chart == item.key) ? 'van-button--warning' : '']"
                        @click="handleGetCharts(item.key)">{{item.value}}</van-button>
                </div>
                <div class="" v-if="showchart==true">
                    <line-charts :key="initCharts" :x-axis-data="charts.axisData" :y-axis-unit="charts.axisUnit"
                        :visual-map="charts.visualMap" :legend="charts.legend" :show-legend-arr="charts.showLegend"
                        :series-data="charts.seriesData" :add-line="true" :line-style="charts.lineStyle"
                        :add-area="true" :area-style="charts.areaStyle"></line-charts>
                </div>
                <div v-if='showchart==false' class="none_info">
                    <img src="../../img/bloodprofile/none.png" />
                    <p>— 暂无数据 —</p>
                </div>
            </div>
        </div>

        <!--<div class="bs_statistics">
			<div class="bp_title flex">
				<div class="bp_title_main">
					<p>BMI统计</p>
				</div>
			</div>

            <div class="shadow">
            		<div class="bs_statistics_tabs bp_tabs flex">
            			<van-button v-for='item in period' round type="info" size="mini" :key="'period_'+item.key"  :class="['filter-item', (selected.statistics == item.key) ? 'van-button--warning' : '']" @click="handleGetStatistics(item.key)">{{item.value}}</van-button>
				</div>
				<div class="statistics_main">
					  <ul>
                        <li>
                            <p class="statistics_main_title">平均体重(kg)</p>
                            <p class="avg">-</p>
                        </li>
                        <li>
                            <p class="statistics_main_title">最高值(kg)</p>
                            <p class="highest">-</p>
                        </li>
                        <li>
                            <p class="statistics_main_title">最低值(kg)</p>
                            <p class="lowest">-</p>
                        </li>
                        <li>
                            <p class="statistics_main_title">平均BMI</p>
                            <p class="bmi_avg">-</p>
                        </li>
                        <li>
                            <p class="statistics_main_title">最高BMI</p>
                            <p class="bmi_highest">-</p>
                        </li>
                        <li>
                            <p class="statistics_main_title">最低BMI</p>
                            <p class="bmi_lowest">-</p>
                        </li>
                    </ul>
	            	</div>
            </div>
        </div>
    -->
        <div class="bs_records">
            <div class="diet_header">
                <van-cell @click="showPopup" is-link>{{columnsValue}}</van-cell>
                <van-popup v-model:show="show" position="bottom" :style="{ height: '45%' }">
                    <van-picker show-toolbar title="时间选择" :columns="columns" :default-index="0" @cancel="show = false"
                        @confirm="onConfirm" />
                </van-popup>
            </div>
            <div class="diet_body">
                <van-list v-if="recordnothing==1" v-model="loading" :finished="finished" finished-text="没有更多了">
                    <van-cell center v-for="item in list" :key="item">
                        <div class="item_list">
                            <img id="dietIcon" style="float: left;" src="../../img/bloodprofile/bmi.png" alt="">
                            <div class="diet_content">
                                <div class="diet_type flex">
                                    <span v-if="!item.type">体重</span>
                                    <span style="float: right;">
                                        {{item.weight?item.weight:''}}</span>
                                </div>
                                <span style="color: rgba(0,0,0,0.65);font-size:13px">{{item.time?item.time:''}}</span>
                                <!-- <div v-if="item.waistLineRecordBean.recordPhoto" class="diet_photo">
                                    <ul>
                                        <li :key="index" v-for="item1 in item.waistLineRecordBean.recordPhoto"
                                            :src="item1" :key="index">
                                            <img :src="item1" />
                                        </li>
                                    </ul>
                                </div> -->
                                <div v-if="item.recordPhoto" class="diet_photo">
                                    <div v-viewer="{movable: false}">
                                        <img v-for="item1 in item.recordPhoto" :src="item1" :key="index"
                                            style="margin-right:1rem;" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </van-cell>
                </van-list>
                <van-list v-if="recordnothing==2">
                    <div class="none_info">
                        <img src="../../img/bloodprofile/none.png" />
                        <p>当前没有打卡记录哦</p>
                    </div>
                </van-list>
                <van-pagination v-model="currentPage" @click="handleBloodCurrentChange" :page-count="totalPage"
                    mode="simple" />
            </div>

        </div>

    </div>
</body>
<script src="../../js/echarts.min.js"></script>
<script src="../../../common/js/vant.min.js"></script>
<!-- viewer 图片预览 -->
<script src="../../../common/js/viewer.js"></script>
<script src="../../../common/js/index.umd.js"></script>
<script src="../../../common/js/url.min.js"></script>
<script src="../../../base.js"></script>
<script type="module">
    import {
        getAction,
        postAction,
        getUrl,
        spliceUrlWechat,
    } from "../../../common/js/api/vue3-axios-utils.js";

    import { lineCharts, uuid } from "../../js/charts-components.js"

    const app = Vue.createApp({
        data() {
            return {
                initCharts: 'init-blood-press',
                charts: {
                    axisData: [],
                    axisUnit: '',
                    legend: [

                        "BMI",
                        "体重",

                    ],
                    showLegend: [],
                    seriesData: [],


                },
                recordDataSource: [],
                statisticsDataSource: [],
                url: {
                    getCharts: "/101/06/1010601",
                    getRecords: "/101/06/1010602",
                    getStatistics: "/101/06/1010603",
                },
                period: [{ key: 2, value: '最近两周' }, { key: 3, value: '最近一个月' }, { key: 5, value: '最近三个月' }, { key: 0, value: '全部' }],
                chartDataLoading: true,
                recordDataLoading: true,
                statisticsDataLoading: true,
                selected: {
                    chart: 2,
                    statistics: 2,
                    record: 2
                },
                paginationShow: true,
                showchart: true,
                columns: ['最近两周', '最近一个月', '最近三个月', '全部'],
                columnsValue: '最近两周',
                recordnothing: 1,

                show: false,
                loading: false,
                finished: false,
                currentPage: 1,
                totalPage: 0,
                pageSize: 10,
                list: [],
            }
        },
        components: {
            lineCharts: lineCharts
        },
        methods: {
            async init() {
                await this.handleGetCharts(this.selected.chart)
                await this.handleGetRecords(this.selected.record)
                await this.handleGetStatistics(this.selected.statistics)
            },
            showPopup() {
                this.show = true
            },
            onClickLeft() {
                window.location.href = '../dailyIndex.html?userid='+this.pid
            },
            onClickRight() {
                window.location.href = '../index.html?userid=' + this.pid
            },
            onConfirm(value, index) {
                console.log(value, index);
                this.columnsValue = value
                this.show = false
                if (index == 0) {
                    this.selected.record = 2
                    this.selected.chart = 2
                }
                if (index == 1) {
                    this.selected.record = 3
                    this.selected.chart = 3
                }
                if (index == 2) {
                    this.selected.record = 5
                    this.selected.chart = 5
                }
                if (index == 3) {
                    this.selected.record = 0
                    this.selected.chart = 0
                }
                this.handleGetRecords(this.selected.record)
                this.handleGetCharts(this.selected.chart)
            },
            handleGetCharts(period) {
                this.chartDataLoading = true;
                this.charts.axisData = []
                this.charts.seriesData = []
                if (period !== this.selected.chart) {
                    this.selected.chart = period;
                    this.selected.record = period
                    for (var k = 0; k < this.period.length; k++) {
                        if (period == this.period[k].key) {
                            this.columnsValue = this.period[k].value
                        }
                    }
                    this.handleGetRecords(this.selected.record)
                }
                postAction(spliceUrlWechat(this.url.getCharts), { period: period, patientId: this.pid }).then((res) => {
                    res = res.data
                    if (res.success) {
                        console.log("getCharts:", res)
                        if (res.result.dates.length > 0) {
                            this.showchart = true
                            for (var i = 0; i < res.result.dates.length; i++) {
                                res.result.dates[i] = res.result.dates[i].substr(5, 11)
                            }
                            this.charts.axisData = res.result.dates || []
                            this.charts.seriesData = res.result.value || []
                            // 延迟500毫秒刷新统计图
                            setTimeout(() => {
                                this.initCharts = uuid()
                            }, 500);
                            console.log('charts', this.charts)
                        } else {
                            this.showchart = false
                        }
                    }
                    if (res.code === 510) {
                        this.$message.warning(res.message)
                    }
                    this.chartDataLoading = false;
                })
            },
            handleGetRecords(period) {
                this.recordDataLoading = true;
                postAction(spliceUrlWechat(this.url.getRecords), { period: period, patientId: this.pid, page: this.currentPage, pageSize: this.pageSize, type: 3 }).then((res) => {
                    res = res.data
                    if (res.success) {
                        console.log("getRecords:", res)
                        if (res.result.count > 0) {
                            this.recordnothing = 1
                            this.paginationShow = true
                            this.totalPage = res.result.totalPage;
                            this.list = res.result.recordList
                            for (let i = 0; i < res.result.recordList.length; i++) {
                                if (res.result.recordList[i].recordPhoto) {
                                    res.result.recordList[i].recordPhoto = res.result.recordList[i].recordPhoto.split(",");
                                }
                            }
                            this.list = res.result.recordList
                        } else {
                            this.recordnothing = 2
                            this.paginationShow = false
                            this.totalPage = res.result.totalPage;
                            this.list = []
                        }

                    }
                    if (res.code === 510) {
                        this.$message.warning(res.message)
                    }
                    this.recordDataLoading = false;
                })
            },
            handleBloodCurrentChange() {
                this.handleGetRecords(this.selected.record);
            },
            handleGetStatistics(period) {
                if (period !== this.selected.statistics) {
                    this.selected.statistics = period;
                }
                this.statisticsDataLoading = true;
                getAction(spliceUrlWechat(this.url.getStatistics), { period: period, patientId: this.pid, type: 3 }).then((res) => {
                    res = res.data
                    if (res.success) {
                        console.log("getstatistics:", res)
                        this.statisticsDataSource = res.result.records || res.result;
                    }
                    if (res.code === 510) {
                        this.$message.warning(res.message)
                    }
                    this.statisticsDataLoading = false;
                })
            }
        },
        created() {
        		if(url('?userid')){
        			this.pid = url('?userid')
        		}else{
        			this.pid = localStorage.pid
        		}
        		this.pid = url('?userid')
            this.init()
        },
    });

    app.use(vant);


    app.use(vant.Lazyload);
    app.use(VueViewer.default);

    app.mount('#app');
</script>

</html>